站設(shè)計(jì)-案例和解析.jpg)
如今，Grid-based（基于柵格的）網(wǎng)頁(yè)設(shè)計(jì)已相當(dāng)普遍，這意味著網(wǎng)頁(yè)布局混亂的日子就要終結(jié)。盡管還無(wú)法用肉眼分辨，但我們的確是步入了有序和結(jié)構(gòu)化的時(shí)代。柵格布局整體趨于勻稱(chēng)，通常會(huì)使網(wǎng)頁(yè)更加整潔美觀(guān)。同時(shí)，柵格框架已經(jīng)成為現(xiàn)代所有網(wǎng)站功能實(shí)現(xiàn)的基礎(chǔ)，這都要?dú)w功于它為終端用戶(hù)提供了完美不失真的設(shè)計(jì)體驗(yàn)。
一般來(lái)說(shuō)，柵格僅僅是水平線(xiàn)和垂直線(xiàn)隔出來(lái)的特定空間，它似乎很難承載任何設(shè)計(jì)元素，所以大部分設(shè)計(jì)師會(huì)根據(jù)路徑描繪出幾何特性。我們已然看慣畫(huà)廊、博客、以及新聞相關(guān)網(wǎng)站中那些干凈利落的柵格，但其實(shí)只需要巧妙地處理下這些框框條條，就能將用戶(hù)的目光吸引到內(nèi)容本身，增加訪(fǎng)客粘性。是滴，這不是天方夜譚！也不足為奇，因?yàn)闁鸥窬哂幸韵绿匦裕?/p>
- 創(chuàng)造可以引導(dǎo)人們視覺(jué)的路徑；
- 展示有序的信息內(nèi)容；
- 在將各種元素組合的同時(shí)，使它們顯得自由獨(dú)立，模塊間可呼吸
接下來(lái)，您將在我們的展示中親眼目睹如何巧妙利用柵格來(lái)做出富有魅力的網(wǎng)頁(yè)設(shè)計(jì)。
Grid-based網(wǎng)站設(shè)計(jì)實(shí)例
主頁(yè)被分割成了相等的、正方的、和帶有漸暗效果的單元格，呈現(xiàn)了多種組合的圖像藝術(shù)。
主頁(yè)被分割成三列，每一列都用圖片瀑布設(shè)計(jì)漂亮地展示了形形色色的攝影作品。此外有意思的是，在您滾動(dòng)頁(yè)面的同時(shí)，會(huì)交替出現(xiàn)(滾動(dòng)視差)一些帶有鏈接的紅色圓圈，而每個(gè)鏈接都指向一個(gè)攝影系列集。
強(qiáng)化閱讀：網(wǎng)頁(yè)特效：滾動(dòng)視差設(shè)計(jì)指南
將色彩及圖片有規(guī)律地布滿(mǎn)整個(gè)網(wǎng)頁(yè)，從而創(chuàng)造出了一個(gè)炫耀華麗的藝術(shù)作品。(伏地嗚咽)
運(yùn)用大小不同但勻稱(chēng)的柵格突出前面的作品，并控制單元格的尺寸來(lái)說(shuō)明內(nèi)容的重要性。越大尺寸，越重要復(fù)雜。
另一個(gè)巧妙運(yùn)用大小不同的柵格的范例，在這個(gè)設(shè)計(jì)中，行的位置取決于列。
充分利用了大小相等勻稱(chēng)的柵格來(lái)裝載各種圣誕節(jié)主題的gif。
很好地運(yùn)用了暗沉色調(diào)，給每個(gè)單元塊都抹上了一塊陰影。這種既自由又束縛的色彩運(yùn)用，給整個(gè)主頁(yè)略微增添了是棋盤(pán)的錯(cuò)覺(jué)。（譯者注：此網(wǎng)站為國(guó)人出品。）
一個(gè)充滿(mǎn)生氣的網(wǎng)站， 它通過(guò)整頁(yè)整頁(yè)的Grid-based畫(huà)廊般的方式展示各個(gè)時(shí)期畫(huà)家的杰出作品，并用時(shí)間軸來(lái)分類(lèi)歸檔。
采用現(xiàn)代干凈清晰的平面風(fēng)格，并用鮮艷的色彩為簡(jiǎn)潔的幾何圖形增添了幾分趣味。
恰當(dāng)?shù)靥幚砹藞D片和文字塊的組合，以整齊有序的頁(yè)面再現(xiàn)了強(qiáng)烈的視覺(jué)感受。
將導(dǎo)航鏈接塊與商品圖片放于矩形柵格之中，由此呈現(xiàn)了它的主頁(yè)。
一個(gè)傳統(tǒng)的左側(cè)菜單欄網(wǎng)站，它以一個(gè)普通攝影畫(huà)廊網(wǎng)站的形象來(lái)迎接用戶(hù)的光臨。
通過(guò)柵格，實(shí)現(xiàn)了令人振奮的大幅照片導(dǎo)航效果。
將每個(gè)單元格對(duì)半分隔，分別用主題相同的圖片和文字填充。除此之外，設(shè)計(jì)師還大膽增加了一些較大的方形滑塊，使整個(gè)柵格帶了點(diǎn)混亂感。
看起來(lái)相當(dāng)神秘和奇特，這都?xì)w功于它全黑的背景；以及它用來(lái)放作品縮略圖的柵格，擺放略微混亂。
為了使網(wǎng)站看起來(lái)整潔干脆，突出了黑白色調(diào)和柵格。
運(yùn)用了一個(gè)很常見(jiàn)的方式來(lái)排列并過(guò)濾視頻縮略圖，再以柵格系統(tǒng)展示出來(lái)。
將整個(gè)主頁(yè)布滿(mǎn)縮略圖，從而形成了一個(gè)精美細(xì)致的柵格頁(yè)面，盡管這使它看起來(lái)很繁瑣和凌亂。
創(chuàng)造了一個(gè)真正的爆炸氛圍。整個(gè)設(shè)計(jì)注重于用戶(hù)體驗(yàn)，通過(guò)柵格使用戶(hù)參與到其獨(dú)一無(wú)二和無(wú)比精彩的動(dòng)畫(huà)中。
將所有的畫(huà)廊元素運(yùn)用得淋漓盡致，它能快速地讓用戶(hù)熟悉網(wǎng)站作品是如何有序無(wú)誤地?cái)[放的。當(dāng)然，這也是通過(guò)柵格實(shí)現(xiàn)的。
擁有一個(gè)很現(xiàn)代的精致外表。該網(wǎng)站主要是基于柵格和一大堆高清照片。
一個(gè)擁有大量矩形功能塊的傳統(tǒng)的，結(jié)構(gòu)完善的博客。
漂亮地運(yùn)用了窄列柵格來(lái)傳遞盡可能多的信息。
利用不同尺寸的行列間隔，為頁(yè)面增加了些許混亂感。
在豎列中放置可視化內(nèi)容，并恰如其分地移去線(xiàn)條，從而更好地展示了大幅照片。
通過(guò)大量留白創(chuàng)造出了一個(gè)清新的氛圍。設(shè)計(jì)師恰當(dāng)?shù)貙㈨?yè)面分割成四列，分別將大字標(biāo)題或照片穿插其中。
反思
柵格是一種不可或缺的設(shè)計(jì)工具，因?yàn)樗?jiǎn)化了混亂到有序的過(guò)程，而在網(wǎng)站設(shè)計(jì)中這樣的能力是相當(dāng)重要的。大多數(shù)普通用戶(hù)都希望以一種方便快捷的方式獲取信息，為滿(mǎn)足這個(gè)需求就有必要將信息有序化，結(jié)構(gòu)化。當(dāng)然，這并不代表網(wǎng)站的外觀(guān)就應(yīng)該變得樸素和平淡。就算是再簡(jiǎn)單的幾何形狀也能被色彩，圖像和圖形消去本來(lái)的模樣，這樣的喧賓奪主卻使它變得更具魅力。另外，無(wú)論是在線(xiàn)雜志，還是創(chuàng)意作品集，對(duì)于任何類(lèi)型的網(wǎng)站，顯性Grid-based設(shè)計(jì)都能完美地融入其中 。
那么，對(duì)于Grid-based網(wǎng)站設(shè)計(jì)您有何見(jiàn)解？這種很明顯帶有故意成分的分割設(shè)計(jì)會(huì)很有吸引力嗎？這是否算是一個(gè)得體的創(chuàng)意？又或者，這類(lèi)設(shè)計(jì)會(huì)更適合博客，在線(xiàn)雜志，和新聞主題的網(wǎng)站？
優(yōu)設(shè)編輯：@林豪婕
翻譯小組:SDC番茄匠 @o798
原文地址：designmodo.com
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)講座：每月邀請(qǐng)國(guó)內(nèi)互聯(lián)網(wǎng)公司設(shè)計(jì)前輩及行業(yè)總監(jiān)在群內(nèi)及YY語(yǔ)音（YY頻道：15335158）分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計(jì)微博：擁有粉絲量27萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：
復(fù)制本文鏈接 文章為作者獨(dú)立觀(guān)點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
繼續(xù)閱讀本文相關(guān)話(huà)題
發(fā)評(píng)論！每天贏獎(jiǎng)品
點(diǎn)擊 登錄 后，在評(píng)論區(qū)留言，系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今，是國(guó)內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái)，提供獎(jiǎng)品贊助 聯(lián)系我們
AI輔助海報(bào)設(shè)計(jì)101例
已累計(jì)誕生 737 位幸運(yùn)星
發(fā)表評(píng)論
↓ 下方為您推薦了一些精彩有趣的文章熱評(píng) ↓